<template>
	<view class="report_repair">
		<list-item showRight leftName="紧急"><u-switch v-model="checked" size="40" slot="right"></u-switch></list-item>
		<!-- 设备信息 -->
		<repair-header iconName="home" textName="设备信息"></repair-header>
		<list-item showRight showBorderBottom leftName="设备">
			<!-- <view class="_select" @click="show = true" slot="right"> -->
			<view class="_select" @click="goPath" slot="right">
				<text>{{ deviceInfoSelected.label || '请选择' }}</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</list-item>
		<list-item showBorderBottom leftName="信息">
			<view class="_info" slot="center">
				<text>{{ deviceInfoSelected.ip }}</text>
				<text>{{ deviceInfoSelected.id }}</text>
				<text>{{ deviceInfoSelected.carCode }}</text>
			</view>
		</list-item>
		<!-- 报修信息 -->
		<repair-header iconName="coupon" textName="报修信息"></repair-header>
		<list-item showBorderBottom leftName="设备故障">
			<view class="_report" slot="center">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" label-size="24">{{ item.name }}</u-radio>
				</u-radio-group>
			</view>
		</list-item>
		<list-item showBorderBottom flexStart leftName="故障原因">
			<view class="_tag" slot="center">
				<u-tag
					class="_tagItem"
					v-for="(item, index) in badList"
					:key="index"
					:text="item.name"
					:type="item.selected ? 'primary' : 'info'"
					shape="circle"
					:mode="item.selected ? 'dark' : 'plain'"
					@click="changeSelected(index)"
				/>
				<u-tag class="_tagItem" text="+其他原因" type="info" shape="circle" mode="plain" @click="showBadPopus = true" />
			</view>
		</list-item>
		<list-item showBorderBottom flexStart leftName="拍照">
			<view class="_photo" slot="center">
				<!-- <view class="_photoIcon"><u-icon name="plus" color="#878787" size="38"></u-icon></view> -->
				<u-upload :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9" width="160" height="160" :before-upload="beforeUpload"></u-upload>
			</view>
		</list-item>
		<list-item showBorderBottom flexStart leftName="描述">
			<view class="_photo" slot="center">
				<u-input v-model="inputValue" :type="type" :border="border" :height="height" :auto-height="autoHeight" :placeholder="inputPlaceholder" />
			</view>
		</list-item>
		<view class="positon_bottom"><u-button type="primary" shape="circle" style="width: 600rpx;" @click="report">立即上报</u-button></view>

		<!-- 设备列表 -->
		<u-select v-model="show" :list="deviceList" @confirm="deviceSelected"></u-select>
		<!-- 故障原因弹出框 -->
		<u-modal v-model="showBadPopus" :mask-close-able="true" show-cancel-button @confirm="addBadValue" @cancel="badValue = ''">
			<view class="_bad" slot="default"><u-input class="_badInput" v-model="badValue" type="text" height="60" border placeholder="请输入故障原因" input-align="center" /></view>
		</u-modal>
	</view>
</template>

<script>
import listItem from './components/list-item.vue';
import repairHeader from './components/repair-header.vue';
export default {
	components: {
		listItem,
		repairHeader
	},
	
	data() {
		return {
			inputValue: '',
			inputPlaceholder: '请详细描述设备故障问题，以便维修人员快速处理',
			type: 'textarea',
			border: true,
			height: 100,
			autoHeight: true,
			checked: false,
			list: [
				{
					name: '机顶盒',
					disabled: false
				},
				{
					name: '屏幕',
					disabled: false
				},
				{
					name: '机顶盒+屏幕',
					disabled: false
				}
			],
			showBadPopus: false,
			badValue: '',
			badList: [
				{
					name: '接触不良',
					selected: false
				},
				{
					name: '保险脱离',
					selected: false
				},
				{
					name: '电源脱离',
					selected: false
				},
				{
					name: '视频头脱离',
					selected: false
				},
				{
					name: '无信号',
					selected: false
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '机顶盒',
			show: false,
			deviceList: [
				{
					value: '1',
					label: '湘A66666'
				},
				{
					value: '2',
					label: '湘A88888'
				}
			],
			deviceInfoSelected: {
				label: '',
				ip: '',
				id: ''
			},
			action: 'http://www.example.com/upload',
			fileList: [
				// {
				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				// }
			]
		};
	},
	onShow() {
		// location.reload()
		this.$forceUpdate()
	},
	methods: {
		// 更新
		updateConfig(item){
			console.log(item)
			this.deviceInfoSelected = {
				label: item.name,
				ip: item.ip,
				id:item.content,
				carCode:item.carCode
			};
		},
		beforeUpload(index, file) {
			return new Promise((resolve, reject) => {
				console.log(file,'file...............')
				this.fileList.push(file)
				// this.$u
				// 	.post('url')
				// 	.then(res => {
				// 		// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
				// 		resolve();
				// 	})
				// 	.catch(err => {
				// 		// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
				// 		reject();
				// 	});
			});
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		goPath(){
			this.$u.route('/pages/deviceList/deviceList');
		},
		// 选择设备
		deviceSelected(e) {
			// e是一个数组
			let res = e[0];
			this.deviceInfoSelected = {
				label: res.label,
				ip: `55-12-34-64-87-${res.value}`,
				id: `VIP${res.value}`
			};
		},
		// 选择故障原因
		changeSelected(index) {
			this.badList[index].selected = !this.badList[index].selected;
			console.log(this.badList, 'this.badList........');
		},
		// 添加故障原因
		addBadValue() {
			console.log(this.badValue);
			let item = {
				name: this.badValue,
				selected: true
			};
			this.badList.unshift(item);
			this.badValue = '';
		},
		// 点击立即上报
		report() {
			let arr = [];
			this.badList.forEach((item, index) => {
				item.selected && arr.push(item.name);
			});
			console.log(arr);
			console.log(this.fileList, 'fileList............');
			this.$u.route({
				// type:'reLaunch',
				url:'/pages/reportRepair/success'
			})
			
			// uni.hideHomeButton()
		}
	}
};
</script>

<style lang="scss" scoped>
.report_repair {
	height: calc(100vh - 140rpx - env(safe-area-inset-bottom));
	background-color: #f5f5f5;
	overflow-y: scroll;
}
._select {
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text {
		color: #999999;
		margin-right: 30rpx;
	}
}
._info {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0 30rpx;
	text {
		font-size: 28rpx;
		color: #999999;
	}
}
._report {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}
._tag {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 30rpx;
	margin: 20rpx 0;
	._tagItem {
		margin: 10rpx 16rpx;
	}
}
._photo {
	// padding: 0 30rpx;
	padding-left: 80rpx;
	margin: 20rpx;
	._photoIcon {
		width: 160rpx;
		height: 160rpx;
		background-color: #f2f2f2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.positon_bottom {
	position: fixed;
	bottom: env(safe-area-inset-bottom);
	left: 0;
	right: 0;
	height: 140rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

._bad {
	width: 400rpx;
	margin: 30rpx auto;
}
._badInput {
	width: 100%;
}
</style>
